<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" />

    <div class="flex mt24">
      <el-card shadow="never" :body-style="{ padding: '12px 10px 12px' }">
        <div slot="header" class="mb9 f16">
          <span style="font-weight: 600">包材入库查询</span>
        </div>
        <Table :tableData="tableData" :tableHeader="tableHeader" :TableHeight="500" />
        <div class="mt24 f12">
          <div>
            <span class="mr10">材料名称</span
            ><el-input class="mr55" v-model="materialNameVal" placeholder="" size="small" clearable @change="" style="width: 331px"></el-input>
          </div>
          <div class="btns">
            <el-button class="bg" type="primary" size="default" @click="">保存</el-button>
            <el-button type="primary" size="default" @click="">打印</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'PackagingMaterial'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入入库单号',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectLabel: '入库原因',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '111111',
        optionLabel: 'option1'
      },
      {
        optionKey: '2',
        optionValue: '222222',
        optionLabel: 'option2'
      },
      {
        optionKey: '19',
        optionValue: 'option19',
        optionLabel: 'option19'
      }
    ]
  },
  {
    type: 'date',
    dateLabel: '入库日期',
    dateValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectLabel: '部门',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '111111',
        optionLabel: 'option1'
      },
      {
        optionKey: '2',
        optionValue: '222222',
        optionLabel: 'option2'
      },
      {
        optionKey: '19',
        optionValue: 'option19',
        optionLabel: 'option19'
      }
    ]
  },
  {
    type: 'select',
    selectValue: '',
    selectLabel: '厂商',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '111111',
        optionLabel: 'option1'
      },
      {
        optionKey: '2',
        optionValue: '222222',
        optionLabel: 'option2'
      },
      {
        optionKey: '19',
        optionValue: 'option19',
        optionLabel: 'option19'
      }
    ]
  },
  {
    type: 'select',
    selectValue: '',
    selectLabel: '包材类别',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '111111',
        optionLabel: 'option1'
      },
      {
        optionKey: '2',
        optionValue: '222222',
        optionLabel: 'option2'
      },
      {
        optionKey: '19',
        optionValue: 'option19',
        optionLabel: 'option19'
      }
    ]
  },
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  }
])

const tableHeader = ref([
  {
    label: '入库单号',
    prop: 'outboundOrder',
    width: '113'
  },
  {
    label: '入库日期',
    prop: 'outboundDate',
    width: '113'
  },
  {
    label: '入库原因',
    prop: 'outboundReason',
    width: '113'
  },
  {
    label: '部门名称',
    prop: 'departmentName',
    width: '113'
  },
  {
    label: '厂商名称',
    prop: 'manufacturerName'
  },
  {
    label: '指令',
    prop: 'directive',
    width: '113'
  },
  {
    label: '包材类别',
    prop: 'packagingMaterialCategory',
    width: '113'
  },
  {
    label: '物料编号',
    prop: 'materialNumber',
    width: '113'
  },
  {
    label: '材料颜色',
    prop: 'materialColor',
    width: '113'
  },
  {
    label: '材料名称',
    prop: 'materialName',
    width: '196'
  },
  {
    label: '规格',
    prop: 'specification',
    width: '162'
  },
  {
    label: '单位',
    prop: 'unit',
    width: '61'
  },
  {
    label: '数量',
    prop: 'number',
    width: '61'
  },
  {
    label: '仓管员',
    prop: 'warehouseKeeper',
    width: '61'
  },
  {
    label: '检核',
    prop: 'check',
    width: '61'
  }
])
const tableData = ref([
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  },
  {
    outboundOrder: '111111',
    outboundDate: '2021-01-01',
    outboundReason: '111111',
    departmentName: '111111',
    manufacturerName: '111111',
    directive: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    number: '111111',
    unitPrice: '111111',
    amount: '111111',
    warehouseKeeper: '111111'
  }
])

const materialNameVal = ref('')
</script>

<style lang="less" scoped>
.btns {
  display: flex;
  justify-content: end;
  margin: 0px 20px 10px;

  .bg {
    background-color: #e7e7e7;
    border: 1px solid #e7e7e7;
    color: #000000;
  }
}
</style>
